<template>
  <div :class="[activeClass, errorClass]">
  <h1>大帅</h1>
  <button @click="toggleErrorClass">切换样式</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeClass: 'active',
      //errorClass 代表其他，未引用.error
      errorClass: 'text-danger'
    }
  },
  methods:{
    toggleErrorClass(){      
      this.errorClass = 'error';
    }
  }
}
</script>
<style>
  .active{
    background-color: #2aaeaa;
  }
  .error{
    background-color: #ad214e;
  }
</style>